<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            height: 100vh;
            /*background-color: ;*/
        }

    </style>
</head>
<body onload="init()">
<div id="myDiagramDiv" class="container"></div>
<script src="release/go.js"></script>
<script>
    function init() {
        if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this

        var $ = go.GraphObject.make;  // for conciseness in defining templates

        var myDiagram =
            $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
                {
                    initialContentAlignment: go.Spot.Center,  // center the content
                    "undoManager.isEnabled": true,  // enable undo & redo
                    scrollMode: go.Diagram.InfiniteScroll,  // allow the diagram to be scrolled beyond content
                    padding: 0,  // scales should be allowed right up against the edges of the viewport
                    "grid.visible": true
                });

        myDiagram.nodeTemplate =
            $(go.Node, "Auto",
                $(go.Shape, "RoundedRectangle",
                    {strokeWidth: 0, portId: "", fromLinkable: true, toLinkable: true},
                    new go.Binding("fill", "color")),
                $(go.TextBlock,
                    {margin: 8},
                    new go.Binding("text", "key"))
            );

        myDiagram.model = new go.GraphLinksModel(
            [
                {key: "Alpha", color: "lightblue"},
                {key: "Beta", color: "orange"},
                {key: "Gamma", color: "lightgreen"},
                {key: "Delta", color: "pink"}
            ],
            [
                {from: "Alpha", to: "Beta"},
                {from: "Alpha", to: "Gamma"},
                {from: "Beta", to: "Beta"},
                {from: "Gamma", to: "Delta"},
                {from: "Delta", to: "Alpha"}
            ]);

        // Keep references to the scales and indicators to easily update them
        var gradScaleHoriz =
            $(go.Node, "Graduated",
                {
                    graduatedTickUnit: 10, pickable: false, layerName: "Foreground",
                    isInDocumentBounds: false, isAnimated: false
                },
                $(go.Shape, {geometryString: "M0 0 H400"}),
                $(go.Shape, {geometryString: "M0 0 V3", interval: 1}),
                $(go.Shape, {geometryString: "M0 0 V15", interval: 5}),
                $(go.TextBlock,
                    {
                        font: "10px sans-serif",
                        interval: 5,
                        alignmentFocus: go.Spot.TopLeft,
                        segmentOffset: new go.Point(0, 7)
                    }
                )
            );

        var gradScaleVert =
            $(go.Node, "Graduated",
                {
                    graduatedTickUnit: 10, pickable: false, layerName: "Foreground",
                    isInDocumentBounds: false, isAnimated: false
                },
                $(go.Shape, {geometryString: "M0 0 V400"}),
                $(go.Shape, {geometryString: "M0 0 V3", interval: 1, alignmentFocus: go.Spot.Bottom}),
                $(go.Shape, {geometryString: "M0 0 V15", interval: 5, alignmentFocus: go.Spot.Bottom}),
                $(go.TextBlock,
                    {
                        font: "10px sans-serif",
                        segmentOrientation: go.Link.OrientOpposite,
                        interval: 5,
                        alignmentFocus: go.Spot.BottomLeft,
                        segmentOffset: new go.Point(0, -7)
                    }
                )
            );

        // These indicators are globally defined so they can be accessed by the div's mouseevents
        gradIndicatorHoriz =
            $(go.Node,
                {
                    pickable: false, layerName: "Foreground", visible: false,
                    isInDocumentBounds: false, isAnimated: false,
                    locationSpot: go.Spot.Top
                },
                $(go.Shape, {geometryString: "M0 0 V15", strokeWidth: 2, stroke: "red"})
            );

        gradIndicatorVert =
            $(go.Node,
                {
                    pickable: false, layerName: "Foreground", visible: false,
                    isInDocumentBounds: false, isAnimated: false,
                    locationSpot: go.Spot.Left
                },
                $(go.Shape, {geometryString: "M0 0 H15", strokeWidth: 2, stroke: "red"})
            );

        // Add listeners to keep the scales/indicators in sync with the viewport
//        myDiagram.addDiagramListener("InitialLayoutCompleted", setupScalesAndIndicators);
//        myDiagram.addDiagramListener("ViewportBoundsChanged", updateScales);
//        myDiagram.addDiagramListener("ViewportBoundsChanged", updateIndicators);
        // Override mousemove Tools such that doMouseMove will keep indicators in sync
        myDiagram.toolManager.doMouseMove = function () {
            go.ToolManager.prototype.doMouseMove.call(this);
            updateIndicators();
        }
        myDiagram.toolManager.linkingTool.doMouseMove = function () {
            go.LinkingTool.prototype.doMouseMove.call(this);
            updateIndicators();
        }
        myDiagram.toolManager.draggingTool.doMouseMove = function () {
            go.DraggingTool.prototype.doMouseMove.call(this);
            updateIndicators();
        }
        myDiagram.toolManager.dragSelectingTool.doMouseMove = function () {
            go.DragSelectingTool.prototype.doMouseMove.call(this);
            updateIndicators();
        }
        // No need to override PanningTool since the ViewportBoundsChanged listener will fire

        function setupScalesAndIndicators() {
            var vb = myDiagram.viewportBounds;
            myDiagram.startTransaction("add scales");
            updateScales();
            // Add each node to the diagram
            myDiagram.add(gradScaleHoriz);
            myDiagram.add(gradScaleVert);
            myDiagram.add(gradIndicatorHoriz);
            myDiagram.add(gradIndicatorVert);
            myDiagram.commitTransaction("add scales");
        }

        function updateScales() {
            var vb = myDiagram.viewportBounds;
            myDiagram.startTransaction("update scales");
            // Update properties of horizontal scale to reflect viewport
            gradScaleHoriz.location = new go.Point(vb.x, vb.y);
            gradScaleHoriz.graduatedMin = vb.x;
            gradScaleHoriz.graduatedMax = vb.x + vb.width;
            gradScaleHoriz.elt(0).width = vb.width;
            // Update properties of vertical scale to reflect viewport
            gradScaleVert.location = new go.Point(vb.x, vb.y);
            gradScaleVert.graduatedMin = vb.y;
            gradScaleVert.graduatedMax = vb.y + vb.height;
            gradScaleVert.elt(0).height = vb.height;
            myDiagram.commitTransaction("update scales");
        }

        function updateIndicators() {
            var vb = myDiagram.viewportBounds;
            var mouseCoords = myDiagram.lastInput.documentPoint;
            myDiagram.startTransaction("update indicators");
            // Keep the indicators in line with the mouse as viewport changes or mouse moves
            gradIndicatorHoriz.location = new go.Point(Math.max(mouseCoords.x, vb.x), vb.y);
            gradIndicatorVert.location = new go.Point(vb.x, Math.max(mouseCoords.y, vb.y));
            myDiagram.commitTransaction("update indicators");

        }


        myDiagram.nodeTemplateMap.add("", $(go.Node, "Auto",
            $(go.Shape, "Circle",
                {stroke: "orange", strokeWidth: 5, spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight},
                new go.Binding("stroke", "color")),
            $(go.Panel, "Spot",
                $(go.Panel, "Graduated",
                    {
                        name: "SCALE", margin: 14,
                        graduatedTickUnit: 2.5,  // tick marks at each multiple of 2.5
                        graduatedMax: 100,  // this is actually the default value
                        stretch: go.GraphObject.None  // needed to avoid unnecessary re-measuring!!!
                    },
                    new go.Binding("graduatedMax", "max"),  // controls the range of the gauge
                    // the main path of the graduated panel, an arc starting at 135 degrees and sweeping for 270 degrees
                    $(go.Shape, {
                        name: "SHAPE",
                        geometryString: "M-70.7 70.7 B135 270 0 0 100 100 M0 100",
                        stroke: "white",
                        strokeWidth: 4
                    }),
                    // three differently sized tick marks
                    $(go.Shape, {geometryString: "M0 0 V10", stroke: "white", strokeWidth: 1.5}),
                    $(go.Shape, {geometryString: "M0 0 V12", stroke: "white", strokeWidth: 2.5, interval: 2}),
                    $(go.Shape, {geometryString: "M0 0 V15", stroke: "white", strokeWidth: 3.5, interval: 4}),
                    $(go.TextBlock,
                        { // each tick label
                            interval: 4,
                            alignmentFocus: go.Spot.Center,
                            font: "bold italic 14pt sans-serif", stroke: "white",
                            segmentOffset: new go.Point(0, 30)
                        })
                ),
                $(go.TextBlock,
                    {alignment: new go.Spot(0.5, 0.9), stroke: "orange", font: "bold italic 14pt sans-serif"},
                    new go.Binding("text", "key"),
                    new go.Binding("stroke", "color")),
                $(go.Shape, {fill: "red", strokeWidth: 0, geometryString: "F1 M-6 0 L0 -6 100 0 0 6z x M-100 0"},
                    new go.Binding("angle", "value", convertValueToAngle)),
                $(go.Shape, "Circle", {width: 2, height: 2, fill: "#444"})
            )
        ))

        var ORIGINAL_HEIGHT = 400;
        function findNodeDataForSlice(slice) {
            var arr = myDiagram.model.nodeDataArray;
            for (var i = 0; i < arr.length; i++) {
                var data = arr[i];
                if (data.slices.indexOf(slice) >= 0) {
                    return data;
                }
            }
        }
        myDiagram.nodeTemplateMap.add("wenduji", $(go.Node, "Spot",
            {resizable: true, resizeObjectName: "BarSpace", locationObjectName: "Bulb", locationSpot: go.Spot.Center},

            $(go.Shape,
                {name: "BarSpace", width: 25, height: ORIGINAL_HEIGHT, strokeWidth: 0, fill: "rgba(0,0,0,.05)"},
                new go.Binding("height").makeTwoWay()
            ),

            // Farenheit scale, on the left:
            $(go.Panel, "Graduated",
                {
                    background: "white",
                    graduatedMin: -40, graduatedMax: 80,
                    graduatedTickBase: 0, graduatedTickUnit: 1,
                    alignment: go.Spot.BottomLeft,
                    alignmentFocus: go.Spot.BottomLeft,
                    alignmentFocusName: "line"
                },
                new go.Binding("graduatedMax", "", function (data) {
                    if (data.type === "scaling") return 80;
                    return (data.height * 0.3) - 40;
                }),
                $(go.Shape, {name: "line", geometryString: "M0 0 V-" + ORIGINAL_HEIGHT, stroke: "gray"},
                    new go.Binding("height")),
                $(go.Shape, {alignmentFocus: go.Spot.Bottom, interval: 2, strokeWidth: 1, geometryString: "M0 0 V15"}),
                $(go.Shape, {alignmentFocus: go.Spot.Bottom, interval: 10, strokeWidth: 2, geometryString: "M0 0 V20"}),
                $(go.TextBlock, {interval: 20, font: "22px Georgia", alignmentFocus: new go.Spot(1, 0.5, 20, 0)}),
                // Mark 32 degrees on the farenheit scale:
                $(go.TextBlock, {
                    interval: 32, graduatedFunction: function (n) {
                        return n === 32 ? "32—" : ""
                    },
                    font: "bold 12px Georgia", stroke: "red", alignmentFocus: new go.Spot(1, 0.5, 20, 0)
                })
            ),

            // Mercury bar, which represents the values of farenheit and celsius
            $(go.Shape,
                {
                    width: 25, strokeWidth: 0, fill: "red",
                    alignment: go.Spot.Bottom,
                    alignmentFocus: go.Spot.Bottom,
                },
                new go.Binding('fill', 'type', function (t) {
                    return t === "scaling" ? "lightcoral" : "red"
                }),
                // To determine the mercury level, look at both data.farenheit and data.celsius, but prefer celsius
                new go.Binding("height", "", function (data) {
                        var thermometerHeight = ORIGINAL_HEIGHT;
                        if (data.type === "scaling") thermometerHeight = data.height;
                        if (data.celsius !== undefined) {
                            // (celsius + minimum value) / (total celsius range) * height
                            return Math.max(0, ((data.celsius + 40) / 67) * thermometerHeight);
                        } else if (data.farenheit !== undefined) {
                            // (farenheit + minimum value) / (total farenheit range) * height
                            return Math.max(0, ((data.farenheit + 40) / 120) * thermometerHeight);
                        } else {
                            return 0;
                        }
                    }
                ),
                new go.Binding("maxSize", "height", function (h) {
                    return new go.Size(NaN, h)
                })
            ),

            // Celsius scale, on the right:
            $(go.Panel, "Graduated",
                {
                    background: "white",
                    // -40 to 27 because we picked -40 to 80 for farenheit, and want them to line up
                    graduatedMin: -40, graduatedMax: 27,
                    graduatedTickBase: 0, graduatedTickUnit: 1,
                    alignment: go.Spot.BottomRight,
                    alignmentFocus: go.Spot.BottomRight,
                    alignmentFocusName: "line2"
                },
                new go.Binding("graduatedMax", "", function (data) {
                    if (data.type === "scaling") return 80;
                    return (data.height * 0.1675) - 40;
                }),

                $(go.Shape, {name: "line2", geometryString: "M0 0 V-" + ORIGINAL_HEIGHT, stroke: "gray"},
                    new go.Binding("height")),
                $(go.Shape, {interval: 2, strokeWidth: 1, geometryString: "M0 0 V15"}),
                $(go.Shape, {interval: 10, strokeWidth: 2, geometryString: "M0 0 V20"}),
                $(go.TextBlock, {
                    interval: 20, textAlign: "left", font: "22px Georgia",
                    alignmentFocus: go.Spot.Left, segmentOffset: new go.Point(0, 22)
                })
            ),

            // Cosmetic: The stem and bulb
            $(go.Shape,
                {
                    width: 25, height: 10, strokeWidth: 0, fill: "red",
                    alignment: go.Spot.Bottom
                },
                new go.Binding('fill', 'type', function (t) {
                    return t === "scaling" ? "lightcoral" : "red"
                })
            ),
            $(go.Shape, "Circle",
                {
                    name: "Bulb",
                    width: 55, height: 55, strokeWidth: 0, fill: "red",
                    alignment: go.Spot.Bottom,
                    alignmentFocus: go.Spot.Top,
                },
                new go.Binding('fill', 'type', function (t) {
                    return t === "scaling" ? "lightcoral" : "red"
                })
            )
            ) // end node template
        )
        myDiagram.nodeTemplateMap.add("sudu", $(go.Node, "Auto",
            $(go.Shape, "Circle",
                {stroke: "orange", strokeWidth: 5, spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight},
                new go.Binding("stroke", "color")),
            $(go.Panel, "Spot",
                $(go.Panel, "Graduated",
                    {
                        name: "SCALE", margin: 14,
                        graduatedTickUnit: 2.5,  // tick marks at each multiple of 2.5
                        graduatedMax: 100,  // this is actually the default value
                        stretch: go.GraphObject.None  // needed to avoid unnecessary re-measuring!!!
                    },
                    new go.Binding("graduatedMax", "max"),  // controls the range of the gauge
                    // the main path of the graduated panel, an arc starting at 135 degrees and sweeping for 270 degrees
                    $(go.Shape, {
                        name: "SHAPE",
                        geometryString: "M-70.7 70.7 B135 270 0 0 100 100 M0 100",
                        stroke: "white",
                        strokeWidth: 4
                    }),
                    // three differently sized tick marks
                    $(go.Shape, {geometryString: "M0 0 V10", stroke: "white", strokeWidth: 1.5}),
                    $(go.Shape, {geometryString: "M0 0 V12", stroke: "white", strokeWidth: 2.5, interval: 2}),
                    $(go.Shape, {geometryString: "M0 0 V15", stroke: "white", strokeWidth: 3.5, interval: 4}),
                    $(go.TextBlock,
                        { // each tick label
                            interval: 4,
                            alignmentFocus: go.Spot.Center,
                            font: "bold italic 14pt sans-serif", stroke: "white",
                            segmentOffset: new go.Point(0, 30)
                        })
                ),
                $(go.TextBlock,
                    {alignment: new go.Spot(0.5, 0.9), stroke: "orange", font: "bold italic 14pt sans-serif"},
                    new go.Binding("text", "key"),
                    new go.Binding("stroke", "color")),
                $(go.Shape, {fill: "red", strokeWidth: 0, geometryString: "F1 M-6 0 L0 -6 100 0 0 6z x M-100 0"},
                    new go.Binding("angle", "value", convertValueToAngle)),
                $(go.Shape, "Circle", {width: 2, height: 2, fill: "#444"})
            )
        ))
        function convertValueToAngle(v, shape) {
            var scale = shape.part.findObject("SCALE");
            var p = scale.graduatedPointForValue(v);
            var shape = shape.part.findObject("SHAPE");
            var c = shape.actualBounds.center;
            return c.directionPoint(p);
        }


        myDiagram.nodes.each(function (node) {
            console.log(node.data)
        })

        var itemTempl =
            $(go.Panel, "TableColumn",
                $(go.Shape,
                    {row: 0, alignment: go.Spot.Bottom},
                    {fill: "slateblue", stroke: null, width: 40},
                    new go.Binding("height", "val"),
                    new go.Binding("fill", "color")),
                $(go.TextBlock,
                    {row: 1},
                    new go.Binding("text")),
                {
                    toolTip: $(go.Adornment, "Auto",
                        $(go.Shape, {fill: "#EFEFCC"}),
                        $(go.TextBlock, {margin: 4},
                            new go.Binding("text", "val"))
                    )
                }
            );

        myDiagram.nodeTemplateMap.add("",
            $(go.Node, "Auto",
                $(go.Shape,
                    {fill: "white"}),
                $(go.Panel, "Vertical",
                    $(go.Panel, "Table",
                        {margin: 6, itemTemplate: itemTempl},
                        new go.Binding("itemArray", "items")),
                    $(go.TextBlock,
                        {font: "bold 12pt sans-serif"},
                        new go.Binding("text"))
                )
            ))

        var pieRadius = 100;

        var sliceTemplate =
            $(go.Panel,
                $(go.Shape,
                    {
                        name: "SLICE",
                        strokeWidth: 2, stroke: "transparent",
                        isGeometryPositioned: true
                    },
                    new go.Binding("fill", "color"),
                    new go.Binding("geometry", "", makeGeo)
                ),
                new go.Binding("position", "", positionSlice),
                { // Allow the user to "select" slices when clicking them
                    click: function (e, slice) {
                        var sliceShape = slice.findObject("SLICE");
                        var oldskips = slice.diagram.skipsUndoManager;
                        slice.diagram.skipsUndoManager = true;
                        if (sliceShape.stroke === "transparent") {
                            sliceShape.stroke = go.Brush.darkenBy(slice.data.color, 0.4);
                            // Move the slice out from the pie when selected
                            var nodedata = findNodeDataForSlice(slice.data);
                            if (nodedata) {
                                var sliceindex = nodedata.slices.indexOf(slice.data);
                                var angles = getAngles(nodedata, sliceindex);
                                if (angles.sweep !== 360) {
                                    var angle = angles.start + angles.sweep / 2;
                                    var offsetPoint = new go.Point(pieRadius / 10, 0);
                                    slice.position = offsetPoint.rotate(angle).offset(pieRadius / 10, pieRadius / 10);
                                }
                            }
                        } else {
                            sliceShape.stroke = "transparent";
                            slice.position = new go.Point(pieRadius / 10, pieRadius / 10);
                        }
                        slice.diagram.skipsUndoManager = oldskips;
                    }
                },
                {
                    toolTip: $(go.Adornment, "Auto",
                        $(go.Shape, {fill: "lightgray"}),
                        $(go.TextBlock,
                            {font: "10pt Verdana, sans-serif", margin: 4},
                            new go.Binding("text", "", function (data) {
                                // Display text and percentage rounded to 2 decimals
                                var nodedata = findNodeDataForSlice(data);
                                if (nodedata) {
                                    var percent = Math.round((data.count / getTotalCount(nodedata) * 100) * 100) / 100;
                                    return data.text + ": " + percent + "%";
                                }
                                return "";
                            }))
                    )
                }
            );

        function makeGeo(data) {
            var nodedata = findNodeDataForSlice(data);
            var sliceindex = nodedata.slices.indexOf(data);
            var angles = getAngles(nodedata, sliceindex);

            // Constructing the Geomtery this way is much more efficient than calling go.GraphObject.make:
            return new go.Geometry()
                .add(new go.PathFigure(pieRadius, pieRadius)  // start point
                    .add(new go.PathSegment(go.PathSegment.Arc,
                        angles.start, angles.sweep,  // angles
                        pieRadius, pieRadius,  // center
                        pieRadius, pieRadius)  // radius
                        .close()));
        }
console.log(findNodeDataForSlice)
        // Given some slice data, find the corresponding node data

        // Ensure slices get the proper positioning after we update any counts
        function positionSlice(data, obj) {
            var nodedata = findNodeDataForSlice(data);
            var sliceindex = nodedata.slices.indexOf(data);
            var angles = getAngles(nodedata, sliceindex);

            var selected = obj.findObject("SLICE").stroke !== "transparent";
            if (selected && angles.sweep !== 360) {
                var offsetPoint = new go.Point(pieRadius / 10, 0); // offset by 1/10 the radius
                offsetPoint = offsetPoint.rotate(angles.start + angles.sweep / 2); // rotate to the correct angle
                offsetPoint = offsetPoint.offset(pieRadius / 10, pieRadius / 10); // translate center toward middle of pie panel
                return offsetPoint;
            }
            return new go.Point(pieRadius / 10, pieRadius / 10);
        }

        var optionTemplate =
            $(go.Panel, "TableRow",
                $(go.TextBlock,
                    {
                        column: 0,
                        font: "10pt Verdana, sans-serif", alignment: go.Spot.Left,
                        margin: 5
                    },
                    new go.Binding("text")
                ),
                $(go.Panel, "Auto",
                    {column: 1},
                    $(go.Shape, {fill: "#F2F2F2"}),
                    $(go.TextBlock,
                        {
                            font: "10pt Verdana, sans-serif",
                            textAlign: "right", margin: 2,
                            wrap: go.TextBlock.None, width: 40,
                            editable: true, isMultiline: false,
                            textValidation: isValidCount
                        },
                        new go.Binding("text", "count").makeTwoWay(function (count) {
                            return parseInt(count, 10);
                        })
                    )
                ),
                $(go.Panel, "Horizontal",
                    {column: 2},
                    $("Button",
                        {
                            click: incrementCount
                        },
                        $(go.Shape, "PlusLine", {margin: 3, desiredSize: new go.Size(7, 7)})
                    ),
                    $("Button",
                        {
                            click: decrementCount
                        },
                        $(go.Shape, "MinusLine", {margin: 3, desiredSize: new go.Size(7, 7)})
                    )
                )
            );

        function isValidCount(textblock, oldstr, newstr) {
            if (newstr === "") return false;
            var num = +newstr; // quick way to convert a string to a number
            return !isNaN(num) && Number.isInteger(num) && num >= 0;
        }

        // When user hits + button, increment count on that option
        function incrementCount(e, obj) {
            myDiagram.model.startTransaction("increment count");
            var slicedata = obj.panel.panel.data;
            myDiagram.model.setDataProperty(slicedata, "count", slicedata.count + 1);
            myDiagram.model.commitTransaction("increment count");
        }

        function decrementCount(e, obj) {
            myDiagram.model.startTransaction("decrement count");
            var slicedata = obj.panel.panel.data;
            if (slicedata.count > 0)
                myDiagram.model.setDataProperty(slicedata, "count", slicedata.count - 1);
            myDiagram.model.commitTransaction("decrement count");
        }

        myDiagram.nodeTemplateMap.add("bar",
            $(go.Node, "Vertical",
//                {deletable: false},
                $(go.TextBlock,
                    {font: "11pt Verdana, sans-serif", margin: 5},
                    new go.Binding("text")
                ),
                $(go.Panel, "Horizontal",
                    $(go.Panel, "Position",
                        {
                            name: "PIE",
                            // account for slices offsetting when selected so the node won't change size
                            desiredSize: new go.Size(pieRadius * 2.2 + 5, pieRadius * 2.2 + 5),
                            itemTemplate: sliceTemplate
                        },
                        new go.Binding("itemArray", "slices")
                    ),
                    $(go.Panel, "Table",
                        {
                            margin: 5,
                            itemTemplate: optionTemplate
                        },
                        new go.Binding("itemArray", "slices")
                    )
                )
            ))

        myDiagram.model = new go.GraphLinksModel([
            {category: "sudu", key: "A", value: 35, max: 200, color: "red"},
            {category: "wenduji", name: "x", height: 400, celsius: 20},
            {
                key: 1,
                text: "Before",
                items: [{text: "first", val: 50},
                    {text: "second", val: 70},
                    {text: "third", val: 60},
                    {text: "fourth", val: 80}]
            },
            {
                key: 0,
                category: "bar",
                text: "Sample Poll",
                slices: [
                    {text: "Option 1", count: 21, color: "#B378C1"},
                    {text: "Option 2", count: 11, color: "#F25F5C"},
                    {text: "Option 3", count: 5, color: "#FFE066"},
                    {text: "Option 4", count: 2, color: "#2B98C5"},
                    {text: "Option 5", count: 1, color: "#70C1B3"}
                ]
            },

        ]);


//        loop();
        function loop() {

            setTimeout(function () {
                myDiagram.startTransaction();
                myDiagram.nodes.each(function (node) {

                    var scale = node.findObject("SCALE");
                    if (scale === null || scale.type !== go.Panel.Graduated) return;
                    // keep the new value within the range of the graduated panel
                    var min = scale.graduatedMin;
                    var max = scale.graduatedMax;
                    var v = node.data.value || Math.floor((max - min) / 2);  // default to middle value
                    if (v < min) v++;
                    else if (v > max) v--;
                    else v += (Math.random() < 0.5) ? -0.5 : 0.5;  // random walk
                    myDiagram.model.setDataProperty(node.data, "value", v);
                });
                myDiagram.commitTransaction("modified Graduated Panel");
                loop();
            }, 1000 / 6);
        }
    }

    // Show indicators on mouseover of the diagram div
    //    function showIndicators() {
    //        myDiagram.startTransaction("show indicators");
    //        gradIndicatorHoriz.visible = true;
    //        gradIndicatorVert.visible = true;
    //        myDiagram.commitTransaction("show indicators");
    //    }
    //
    // Hide indicators on mouseout of the diagram div
    //    function hideIndicators() {
    //        myDiagram.startTransaction("hide indicators");
    //        gradIndicatorHoriz.visible = false;
    //        gradIndicatorVert.visible = false;
    //        myDiagram.commitTransaction("hide indicators");
    //    }


</script>
</body>
</html>